<template>
    <div class="trade_setting_page">
        <div class="trade_setting">
            <div class="title">售后设置</div>
            <div class="trade_setting_container">
                <el-form ref="formRef" :model="form">
                    <el-form-item label="售后收货" prop="afterSetting">
                        <el-radio-group v-model="form.afterSetting">
                            <el-radio class="font_color" label="1">商城端处理</el-radio>
                            <el-radio :disabled="!isOpenServe" label="2"
                                >ERP端收货
                                <span v-if="!isOpenServe" class="sub_container">（请先开通ERP） </span></el-radio
                            >
                        </el-radio-group>
                        <div class="tip">
                            （针对同步到ERP的售后单）退货退款的场景中，商家可自行选择售后收货的系统。若选择ERP端收货，请确保已对接ERP系统。
                        </div>
                    </el-form-item>

                    <el-form-item label="自动退款" prop="refundSetting">
                        <el-radio-group v-model="form.refundSetting">
                            <el-radio label="1">开启</el-radio>
                            <el-radio label="0">关闭</el-radio>
                        </el-radio-group>
                        <div class="tip">商家确认收货后，系统自动退款，无需人工操作退款。</div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="save_btn"><el-button type="primary" @click="saveHandle">保存</el-button></div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/request/index';
import { setLayout, resetLayout } from '@/hooks/layout';

const formRef = ref(null);
/* 该页面是否开启相关值 1 未开启 2 开启 */
const form = reactive({
    afterSetting: '1',
    refundSetting: '0'
});
const isOpenServe = ref(false);

const saveHandle = async () => {
    await request('editTradeSettingInfoServ', {
        receiveConfig: Number(form.afterSetting),
        autoRefund: form.refundSetting === '1'
    });
    ElMessage.success('保存成功');
    queryInfo();
};

const queryInfo = async () => {
    const { data } = await request('queryTradeSettingInfoServ');
    // data.receiveConfig：1-商城端 2-ERP端
    form.afterSetting = String(data.receiveConfig) || '1';
    // 是否自动退款 Boolean
    form.refundSetting = String(Number(data?.autoRefund)) || '0';
};

const checkServeOpen = async () => {
    // data.isAuth 是否授权erp 0-未授权 1-授权中 2-已授权未获取token 3-授权成功 4-授权失效
    const { data } = await request('erpAuthBindShopServ');
    isOpenServe.value = data.isAuth == 3;
};

onMounted(() => {
    checkServeOpen();
    queryInfo();
    setLayout();
});
onUnmounted(() => {
    resetLayout();
});
</script>
<style lang="scss" scoped>
.trade_setting_page {
    .trade_setting {
        :deep(.el-form-item__label) {
            color: #33302d;
        }
        :deep(.el-radio__label) {
            color: #33302d;
        }
        background-color: #ffffff;
        height: calc(100vh - 255px);
        padding: 24px;
        display: flex;
        flex-direction: column;
        .title {
            display: flex;
            justify-content: space-between;
            height: 40px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 550;
            color: #33302d;
            border-bottom: 1px solid #eaeaea;
            line-height: 16px;
        }
        .trade_setting_container {
            margin-top: 25px;
            .sub_container {
                color: #969696;
            }
            .tip {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #969696;
                line-height: 18px;
                width: 100%;
            }
        }
    }
    .save_btn {
        margin-top: 16px;
        margin-bottom: -14px;
        padding: 11px;
        text-align: center;
        background-color: #fff;
    }
}
</style>
